<template>
  <div class="pdf-viewer">
    <div class="pdf-toolbar">
      <button @click="zoomIn">放大</button>
      <button @click="zoomOut">缩小</button>
      <button @click="toggleHandTool">手型工具</button>
      <button @click="toggleSinglePageMode">单页模式</button>button>
      <button @click="toggleDoublePageMode">双页模式</button>
      <input type="file" @change="loadPdf" accept=".pdf" />
    </div>
    <div class="pdf-container" ref="pdfDocument"></div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'PdfViewer'
}
</script>

<script setup lang="ts">
import { ref, onMounted, getCurrentInstance } from 'vue'
import type { ComponentInternalInstance } from 'vue'
import * as pdfjsLib from 'pdfjs-dist'
import 'pdfjs-dist/web/pdf_viewer.css'

const props = defineProps({
  filePath: {
    type: String,
    required: true
  }
})

const that = getCurrentInstance() as ComponentInternalInstance
let pdfContainer: HTMLElement
let pdfViewer: HTMLElement
let pdfDocument: HTMLElement

const handToolEnabled = ref(false)
const singlePageModeEnabled = ref(true)
const doublePageModeEnabled = ref(false)
const zoom = ref(1)

let loadPdf = async (event: Event) => {
  const file = ((event.target as HTMLInputElement).files as FileList)[0]
  const fileReader = new FileReader()
  fileReader.onload = async () => {
    const arrayBuffer = fileReader.result as ArrayBuffer
    const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise
    pdfDocument.value = pdf
    renderPdf()
  }
  fileReader.readAsArrayBuffer(file)
}

let renderPdf = () => {
  if (!pdfContainer.value || !pdfDocument.value) {
    return
  }
  pdfViewer.value = new pdfjsLib.PDFViewer({
    container: pdfContainer.value,
    handTool: handToolEnabled.value,
    singlePageMode: singlePageModeEnabled.value,
    doublePageMode: doublePageModeEnabled.value
  })
  pdfViewer.value.setDocument(pdfDocument.value)
  pdfViewer.value.currentScale = zoom.value
}

let zoomIn = () => {
  zoom.value += 0.1
  pdfViewer.value.currentScale = zoom.value
}

let zoomOut = () => {
  zoom.value -= 0.1
  pdfViewer.value.currentScale = zoom.value
}

let toggleHandTool = () => {
  handToolEnabled.value = !handToolEnabled.value
  pdfViewer.value.handTool = handToolEnabled.value
}

let toggleSinglePageMode = () => {
  singlePageModeEnabled.value = true
  doublePageModeEnabled.value = false
  pdfViewer.value.singlePageMode = true
  pdfViewer.value.doublePageMode = false
}

let toggleDoublePageMode: () => void

onMounted(() => {
  pdfContainer = that.refs.pdfContainer as HTMLElement
  pdfViewer = that.refs.pdfViewer as HTMLElement
  pdfDocument = that.refs.pdfDocument as HTMLElement

  toggleDoublePageMode = () => {
    singlePageModeEnabled.value = false
    doublePageModeEnabled.value = true
    pdfViewer.value.singlePageMode = false
    pdfViewer.value.doublePageMode = true
  }

  pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdfjs-dist/build/pdf.worker.js'
  pdfjsLib.GlobalWorkerOptions.workerPort.postMessage({
    type: 'font',
    fontName: 'Roboto',
    fontSrc: '/fonts/Roboto-Regular.ttf'
  })
  renderPdf()
})
</script>

<style lang="scss">
.pdf-viewer {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: rgb(255, 244, 231);
  .pdf-toolbar {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #eee;
  }
  .pdf-container {
    flex: 1;
    overflow: auto;
  }
}
</style>
